<!-- 经营信息跟踪统计 -->
<template>
  <div>
    <HomeCard title="经营信息跟踪统计">
      <template v-slot:content>
        <div class="business-info-right">
          <HomeEcharts ref="EchartsRef" :echartsOption="echartsOption" />
        </div>
      </template>
    </HomeCard>
  </div>
</template>

<script type="text/javascript">
import HomeCard from "@/pages/components/homeCard/index.vue";
import HomeEcharts from "@/pages/components/homeEcharts/index.vue";

import { trackStatistics } from "@/api/home";

let ydata = [
  {
    name: "未洽谈",
    value: 18,
    fieldName:"projectNotDiscussedCount"
  },
  {
    name: "跟进中",
    value: 16,
    fieldName:"projectFollowUpCount"
  },
  {
    name: "已投标",
    value: 15,
    fieldName:"projectAlreadyDeliverTenderCount"
  },
  {
    name: "未投标",
    value: 14,
    fieldName:"projectUnDeliverTenderCount"
  },
  {
    name: "已中标",
    value: 10,
    fieldName:"projectWinTheBidCount"
  },
  {
    name: "已签约",
    value: 7.9,
    fieldName:"projectSignAContractCount"
  },
  {
    name: "其他",
    value: 6.7,
    fieldName:"otherCount"
  },
];
let color = [
  "#8d7fec",
  "#5085f2",
  "#e75fc3",
  "#f87be2",
  "#f2719a",
  "#fca4bb",
  "#f59a8f",
  // "#fdb301",
  // "#57e7ec",
  // "#cf9ef1",
];
let xdata = [
  "未洽谈",
  "跟进中",
  "已投标",
  "未投标",
  "已中标",
  "已签约",
  "其他",
];

export default {
  name: "todo-page",
  components: {
    HomeCard,
    HomeEcharts,
  },
  data() {
    return {
      echartsOption: {
        backgroundColor: "rgba(255,255,255,1)",
        color: color,
        legend: {
          // orient: "vartical",
          x: "left",
          bottom: "0",
          data: xdata,
          itemWidth: 16,
          itemHeight: 8,
          // itemGap: 16,
          formatter: function (name) {
            return "" + name;
          },
        },
        series: [
          {
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 2, //最小的扇区角度（0 ~ 360）
            radius: ["50%", "65%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 6,
              },
            },
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{span|{c}}{b|条}\n{text|{b}}",
                rich: {
                  b: {
                    color: "#999",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 4,
                  },
                  span: {
                    color: "#333",
                    fontSize: 24,
                    align: "center",
                    paddingTop: 20,
                  },
                  text: {
                    color: "#999",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 15,
                  },
                  // value: {
                  //   color: "#8693F3",
                  //   fontSize: 24,
                  //   align: "center",
                  //   verticalAlign: "middle",
                  // },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            data: ydata,
          },
        ],
      },
    };
  },
  methods: {
    checkedTimer(item) {
      this.cureentTimer = item;
      this.trackStatisticsData();
    },
    async trackStatisticsData() {
      let data = await trackStatistics();
      ydata.forEach( o => {
        o.value = data[o.fieldName]
      })
      this.echartsOption.series[0].data = ydata
      console.log(data,'trackStatisticsData')
      this.$refs.EchartsRef.handleSetVisitChart();
    },
  },
  mounted() {
    this.trackStatisticsData()
  },
};
</script>

<style lang="less" scoped>
.business-info-right {
  margin: 18px 0 0 0;
  width: 100%;
  height: 310px;
  background: #f2f2f2;
}
</style>
